<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />
        <el-alert class="ba-table-alert" title="需要注意的事项" type="info" show-icon>
            <template #title>
                <div class="iconSize">受限于浏览器策略，自动播放提示音需要打开悬浮面板的 <Icon name="el-icon-Microphone" size="14" /></div>
                <div class="iconSize">白名单：系统消息 <span style="font-weight: bold">只会</span> 通知白名单内的管理员</div>
                <div class="iconSize">黑名单：系统消息 <span style="font-weight: bold">不会</span> 通知黑名单内的管理员</div>
            </template>
        </el-alert>
        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh', 'edit', 'comSearch', 'quickSearch']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('shop.notify.notifyConfig.quick Search Fields') })"
        ></TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef">
            <template #message>
                <el-table-column prop="message" :label="t('shop.notify.notifyConfig.message')" align="center" width="100">
                    <template #default="{ row }">
                        <span>
                            <Icon v-if="row.audio_path" name="fa fa-volume-up" style="cursor: pointer" @click="onPlayAudio(row.audio_path)"></Icon>
                        </span>
                    </template>
                </el-table-column>
            </template>
        </Table>

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import { onPlayAudio } from './index'

defineOptions({
    name: 'shop/notify/notifyConfig',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/shop.notify.NotifyConfig/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: t('shop.notify.notifyConfig.message_type'),
                prop: 'message_type',
                align: 'center',
                render: 'tag',
                operator: 'eq',
                sortable: false,
                width: 120,
            },
            {
                label: t('shop.notify.notifyConfig.message'),
                prop: 'message',
                align: 'center',
                sortable: false,
                width: 220,
                operator: false,
                showOverflowTooltip: true,
                render: 'slot',
                slotName: 'message',
            },
            // 搜索用
            {
                label: t('shop.notify.notifyConfig.receiver__username'),
                prop: 'receiver_ids',
                align: 'center',
                operator: 'FIND_IN_SET',
                comSearchRender: 'remoteSelect',
                remote: {
                    pk: 'id',
                    field: 'nickname',
                    remoteUrl: adminBaseRoutePath + '/shop.notify.NotifyConfig/getAdminList',
                },
                show: false,
            },
            {
                label: t('shop.notify.notifyConfig.receiver_rule'),
                prop: 'receiver_rule',
                align: 'center',
                operator: 'eq',
                width: 100,
                render: 'tag',
                replaceValue: { '1': t('shop.notify.notifyConfig.receiver_rule 1'), '0': t('shop.notify.notifyConfig.receiver_rule 0') },
                custom: {
                    '0': 'danger',
                    '1': 'success',
                },
            },
            {
                label: t('shop.notify.notifyConfig.receiver__username'),
                prop: 'receiver.username',
                align: 'center',
                operator: false,
                showOverflowTooltip: true,
            },
            {
                label: t('shop.notify.notifyConfig.create_time'),
                prop: 'create_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
            {
                label: t('shop.notify.notifyConfig.update_time'),
                prop: 'update_time',
                align: 'center',
                render: 'datetime',
                operator: 'RANGE',
                sortable: 'custom',
                width: 160,
                timeFormat: 'yyyy-mm-dd hh:MM:ss',
            },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false, fixed: 'right' },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: {},
    },
    {},
    {
        getIndex({ res }) {
            baTable.table.column.find((item) => item.prop === 'message_type')!.replaceValue = res.data.types
            baTable.table.data?.map((item) => (item.receiver_rule = String(item.receiver_rule)))
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">
.iconSize {
    font-size: 14px;
}
</style>
